<template>
    <div class="select_page_box" :style="{height: bodyHeight - offsetTop + 'px'}">
        <me-scroll class="meScroll" :down="mescrollDown" :up="mescrollUp">
            <div class="select_content">
                <div class="name_search" :class="isFocus ? 'active': ''">
                    <iconSvg name="search" w="20px" class="name_search_icon"></iconSvg>
                    <input type="text" class="name_input" :class="emptyData ? 'noSearchData' : ''" @focus="restColor" @blur="recovery" v-model="name" :placeholder="isFocus ? '' : '输入姓名搜索'">
                </div>
                <p class="select_title">{{selectTitle}}</p>
                <div class="select_person_box" v-if="turnCheckId == undefined">
                    <person-tree @changeId="change" @noHasFindName="noHasFindName" :propsLeader="propsLeader" :defDepartmentId="defDepartmentId" @resetName="resetName" ref="personTree"></person-tree>
                </div>
                <div class="select_person_box" v-else>
                    <turn-person-tree  @changeId="changeturnPerson" @TurnHandler="TurnHandler" @noHasFindName="noHasFindTurnName" @resetName="resetName" ref="turnPersonTree"></turn-person-tree>
                </div>
            </div>
        </me-scroll>
        <div class="footer_confirm">
            <button class="reset" :class="resetActive ? 'active' : ''" @click="resetFn">重置</button>
            <button class="confirm" :class="submitActive ? 'active' : ''" @click="submit">确认</button>
        </div>
        <div v-transfer-dom >
            <confirm v-model="show"
            class="select_page_confirm"
            title="提示"
            confirm-text="取消"
            cancel-text="确认"
            :hide-on-blur="true"
            @on-cancel="onConfirm"
            @on-confirm="onCancel">
                <p style="text-align:center;">退出界面内容不会保存</p>
            </confirm>
        </div>
    </div>
</template>

<script>
import bus from '@/utils/eventBus'
import personTree from '@/components/common/principalPersonTree'
import turnPersonTree from '@/components/common/turnPersonTree'
import MeScroll from 'mescroll.js/mescroll.vue'
import {Confirm, TransferDomDirective as TransferDom} from 'vux'
export default {
    directives:{
        TransferDom
    },
    components: {
        Confirm,
        personTree,
        turnPersonTree,
        MeScroll
    },
    props: {
        offsetTop: {
            type: [String, Number],
            default: 45
        },
        departmentId: {
            type: [String, Number]
        },
        defDepartmentId: {
            type: [String, Number]
        },
        selectTitle: {
            type: String,
            default: '选择负责人'
        },
        turnCheckId: {
            type: [String, Number]
        },
        workSheetType: {
            type: String
        },
        propsLeader: {
             type: String,
             default: ''
        }
    },
    data() {
        return {
            name: '',
            show: false,
            leader: '',
            turnLeaderId: '',
            chooseChecker: '',
            resetActive: false,
            submitActive: false,
            emptyData: false,
            isFocus: false,
            bodyHeight:null,
            mescrollDown: {
                use: false
            },
            mescrollUp: {
                use: false
            },
        }
    },
    destroyed() {
        document.getElementsByTagName('body')[0].style.height = 'auto'
    },
    mounted() {
        this.bodyHeight =document.getElementsByTagName('html')[0].clientHeight
    },
    methods: {
        noHasFindName() {
            this.$vux.toast.text('搜索负责人不存在', 'bottom')
        },
        noHasFindTurnName() {
            this.$vux.toast.text('搜索转办人不存在', 'bottom')
        },
        change(id, name) {
            this.leader = id
            this.chooseChecker = name
        },
        changeturnPerson(id, name) {
            this.turnLeaderId = id
        },
        restColor() {
            this.isFocus = true
            this.emptyData = false
            document.getElementsByTagName('body')[0].style.height = this.bodyHeight + 'px'
            
        },
        resetFn() {
            this.resetActive = true
            setTimeout(() => {
                this.resetActive = false
            }, 200);
            this.reset()
        },
        resetName() {
            this.name = ''
        },
        reset() {
            this.name = ''
            this.leader = ''
            this.turnLeaderId = ''
            this.chooseChecker = ''
            if (this.turnCheckId == undefined) {
                this.$refs.personTree.recursionFn(this.$refs.personTree.returndepartmentData())
            } else { //转办重置
                this.$refs.turnPersonTree.recursionFn(this.$refs.turnPersonTree.returndepartmentData())
            }
        },
        TurnHandler() {
            let obj = {
                id: this.turnCheckId,
                userId: this.turnLeaderId
            }
            this.$http(this.$API.checkTransForm,obj,true).then((res) => {
                    if (res) {
                         this.$vux.toast.text('转办成功', 'bottom')
                         this.$emit('closeSelectPersonFn')
                         this.$emit('resetUpScroll')
                    }
            })
        },
        submit() {
             this.submitActive = true
            setTimeout(() => {
                this.submitActive = false
            }, 200);

            if (this.turnCheckId == undefined) {
                if (this.name.length !== 0) {
                    this.$refs.personTree.searchName(this.name)
                } else {
                    if (this.leader.length == 0) {
                        this.$vux.toast.text('请选择负责人', 'bottom')
                        return
                    }
                }
                
                this.$emit('changeId', this.leader, this.chooseChecker)
                this.$emit('closeSelectPersonFn')
            } else { //转办
                if (this.name.length !== 0) {
                    this.$refs.turnPersonTree.searchName(this.name)
                } else {
                    if (this.turnLeaderId.length == 0) {
                        this.$vux.toast.text('请选择转办人', 'bottom')
                        return
                    }
                    this.TurnHandler()
                }
            }
        },
        recovery() {
            this.isFocus = false
            window.scroll(0, 0);
        },
        onConfirm() {
            // console.log( this.$refs.header.fromPath)
            this.show = false
        },
        onCancel() {
            this.show = false
        }
    }
}
</script>

<style lang="less" scoped>
    .select_page_box{
        background: #22233F;
        position: relative;
        // padding-bottom: 46px;
        .select_content{
            padding: 0 16px;
            height: 100%;
            // overflow-y: auto;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            .name_search{
                margin-top: 20px;
                position: relative;
                background: #292A4D;
                border-radius: 2px;
                transition: all 0.3s ease-in-out;
                &.active{
                    background: #383A69
                }
                .name_search_icon{
                    position: absolute;
                    left: 6px;
                    top: 50%;
                    transform: translate(0, -50%);
                    color: rgba(255,255,255,0.6);
                }
                .name_input{
                    line-height: 20px;
                    padding: 12px 30px;
                    font-size: 15px;
                    color: #fff;
                    &::-webkit-input-placeholder{
                        font-size: 15px!important;
                        color: rgba(255,255,255,0.6)!important;
                        text-align: left!important;
                        line-height: 20px!important;
                    }
                    &.noSearchData{
                        color: #FA0000;
                    }
                }
            }
            .select_title{
                font-size: 17px;
                color: #fff;
                padding: 20px 0 12px;
            }
            .select_person_box{
                padding: 0 8px;
                margin-bottom: 60px;
                background: #292A4D;
                border-radius: 4px;
            }
        }
        .footer_confirm{
            display: flex;
            // border-top: 1px solid rgba(69,109,230,1);
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            background-color: #22233f;
            button{
                outline: none;
                border: none;
                text-align: center;
                padding: 10px 0;
                font-size: 17px;
                transition: all 0.3s ease-in-out;
            }
            .reset{
                width: 135px;
                background: transparent;
                color: #456DE6;
                border-top: 1px solid rgba(69,109,230,1);
                &.active{
                    background: #456DE6;
                    color: #fff;
                }
            }
            .confirm{
                flex: 1;
                background: #456DE6;
                color: #fff;
                border-top: 1px solid rgba(69,109,230,1);
                &.active{
                    background: #6E92FF;
                }
            }
        }
    }
</style>